<template>
  <div>
      <div class="hd">
        <div class="logo"><img src="../assets/nlogo.png" alt=""> </div>
        <div class="hdr">
          <a href="tel:18174123678" >
            <i class="iconfont icon-phone-left"></i>
            召唤管家
          </a>
        </div>
      </div>
      <div class="sd">
        <md-swiper
          ref="swiper"
          :is-prevent="false">
          <md-swiper-item :key="$index" v-for="(item, $index) in sliders"   @click.native="dede(item.id)">
            <img :src="item.img" alt=""  >
          </md-swiper-item>
        </md-swiper>
      </div>
      <div class="bd">
        <div @click="$router.push({name:'nlist'})">
            <div class="ico">  <i class="iconfont icon-car_hy"></i></div>
            <div class="iname">租车</div>
        </div>
        <div @click="$router.push({name:'flight'})" >
             <div class="ico">  <i class="iconfont icon-fly" style="font-size: 40px;"></i></div>
             <div class="iname">机场接送</div>
        </div>
        <div @click="showing">
          <div class="ico bl">  <i class="iconfont icon-vipffb400" style="font-size: 40px;"></i></div>
          <div class="iname"> 私享服务</div>
        </div>

        <div @click="$router.push({name:'Account'})">
         <div class="ico bl">  <i class="iconfont  icon-gerenzhongxin" style="font-size: 40px;"></i></div>
          <div class="iname"> 个人中心</div>
        </div>
      </div>
       <div class="fd">
              <div class="cbt">客服订车</div>
              <div>  <i class="iconfont icon-phone-left"></i> 18174123678  </div>
       </div>

  </div>
</template>

<script>

import { Toast } from 'mand-mobile'
import p1 from '@/assets/pp1.jpg'
import p2 from '@/assets/pp2.jpg'
import p3 from '@/assets/pp3.jpg'
export default {
  name: 'Home',
  data () {
    return {
      sliders: [
        {img: p1},
        {img: p2},
        {img: p3}
      ]
    }
  },
  created: async function () {
    if (!window.localStorage.getItem('wxopenid')) {
      window.location.href = 'http://tmc.guotaijinxing.com/wx/entrytmc'
    } else {
      const _oid = window.localStorage.getItem('wxopenid')
      const reurl = `http://tmc.guotaijinxing.com/wx/entrytmc?relId=` + _oid
      console.log(reurl)
      wx.ready(function () { // 需在用户可能点击分享按钮前就先调用
        wx.onMenuShareAppMessage({
          title: '欢迎使用车太多的租车服务', // 分享标题
          desc: '最好用的高端汽车租赁平台', // 分享描述
          link: reurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://tmc.guotaijinxing.com/public/aaa.png', // 分享图标
          success: function () {
            // 用户点击了分享后执行的回调函数
          }
        })

        wx.onMenuShareTimeline({
          title: '欢迎使用车太多的租车服务', // 分享标题
          link: reurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://tmc.guotaijinxing.com/public/aaa.png', // 分享图标
          success: function () {
            // 用户点击了分享后执行的回调函数
          }})

        wx.onMenuShareQQ({
          title: '欢迎使用车太多的租车服务', // 分享标题
          desc: '最好用的高端汽车租赁平台', // 分享描述
          link: reurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://tmc.guotaijinxing.com/public/aaa.png', // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })

        wx.onMenuShareWeibo({
          title: '欢迎使用车太多的租车服务', // 分享标题
          desc: '最好用的高端汽车租赁平台', // 分享描述
          link: reurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://tmc.guotaijinxing.com/public/aaa.png', // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })

        wx.onMenuShareQZone({
          title: '欢迎使用车太多的租车服务', // 分享标题
          desc: '最好用的高端汽车租赁平台', // 分享描述
          link: reurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://tmc.guotaijinxing.com/public/aaa.png', // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })

        /*
        wx.updateAppMessageShareData({
          title: '欢迎使用车太多的租车服务', // 分享标题
          desc: '最好用的高端汽车租赁平台', // 分享描述
          link: reurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://tmc.guotaijinxing.com/public/aaa.png' // 分享图标
        }, function (res) {
          // 这里是回调函数
        })

        wx.updateTimelineShareData({
          title: '欢迎使用车太多的租车服务', // 分享标题
          link: reurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://tmc.guotaijinxing.com/public/aaa.png' // 分享图标
        }, function (res) {
          // 这里是回调函数
        }) */
      })
    }
    this.getads()
  },
  mounted: async function () {

  },
  methods: {
    showing () {
      Toast.info('即将推出,敬请期待', 1500)
    },
    async getads () {
      let res = await this.$api.post('/admin/getads')
      if (res.data.state) {
        this.sliders = res.data.data.rows
      }
    },
    async dede (id) {
      console.log(id)
      this.$router.push({name: 'dede', params: {id}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   .hd{
     height: 50px;
     background:rgb(31,41,56);
     color:#ffefff;
     font-size: 18px;
     position: relative;
   }
  .hd i {

    font-size: 20px;
  }
  .hdr{
    float:right;
    margin-right: 20px;
    font-size: 14px;
  }
  .sd{
    height: 185px;
  }
  .bd{
    display: flex;
    flex-wrap: wrap;
  }
  .bd > div{
    width: 45%;
    flex-grow: 1;
    height: 120px;
    box-sizing: border-box;
    border-bottom:1px solid #ededed;
    position: relative;
    text-align: center;
    padding-top: 20px;
  }
  .bd > div:nth-child(odd){
    border-right:1px solid #ededed;
  }
  .ico{
    height: 50px;
    overflow: hidden;
    color:#efbf43
  }
  .bd  i{
    font-size: 50px;
  }
  .iname{
    color:#666;
    font-size: 14px;
  }
  .bl{
    color:#a5c7f4
  }
  .fd{
    display: flex;
  }
  .fd > div{
    width: 0;
    flex-grow: 1;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    color:#666
  }
  .logo{
    float:left;
    height: 23px;
    margin-left: 20px;
    margin-top: 5px;
  }
  .logo > img{
    height: 100%;
  }
  .hdr >a {
    text-decoration: none;
    color:#ffefff
  }
  .sd  img{
    height: 185px;
  }
</style>
